@charset "utf-8";

// ---- Variables
@border-radius: 2px;




// ---- Mixins
.scrollbar(){
    &::-webkit-scrollbar {
        width: 6px;
    }
    &::-webkit-scrollbar-track {
        background: transparent;
    }
    &::-webkit-scrollbar-thumb {
        border-radius: 3px;
        background: #aaa;
    }
}
.txt-ellipsis(){
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}





// ---- 组件样式
.iol-language-select {
    position: relative;
    display: inline-block;
    min-width: 300px;
    width: 100%;
    font: 14px/1.43 "microsoft yahei";
    color: #333;
    background: #fff;
    
    .fl { float: left; }
    .fr { float: right; }
    ul {
        list-style: none;
        margin: 0;
        padding-left: 0;
    }
    a { text-decoration: none; color: inherit;}
    .disabled { background-color: transparent; }
    
    &.up {
        .origin-langs,
        .target-langs {
            top: auto;
            bottom: calc(~"100% + 5px");
            border-radius: @border-radius @border-radius @border-radius 0;
            box-shadow: 0 -5px 10px #ccc;
        }
        
        .lang-btn.active {
            border-radius: 0 0 @border-radius @border-radius;

            &:after {
                bottom: auto;
                top: -7px;
            }
        }
    }

    @animTime: 0.5s;
    .translate-operation {
        position: relative;
        text-align: center;
        &.exchanging {
            .origin .in {
                left: calc(~"100% + 2px +"@gutter*2);
                transition: left @animTime ease 0s;
            }
            .target .in {
                left: calc(~"-100% - 2px -"@gutter*2);
                transition: left @animTime ease 0s;
            }
        }
    }
    
    
    .arrow-down {
        display: inline-block;
        vertical-align: middle;
        width: 0;
        height: 0;
        border: 4px solid transparent;
        border-top-color: #777;
    }
    .arrow-up {
        border-top-color: transparent;
        border-bottom-color: #777;
    }
    

    // -- 语言按钮 和 交换按钮
    .exchange,
    .lang-btn {
        display: inline-block;
        vertical-align: middle;
    }
    
    @gutter: 30px;
    @borderColor: #dcdcdc;
    @hoverColor2: #2e82ff;
    .lang-btn {
        position: relative;
        width: calc(~"50% - "@gutter);
        height: 30px;
        box-sizing: border-box;
        border-radius: @border-radius;
        border: 1px solid @borderColor;
        cursor: pointer;
        
        .origin-lang,
        .target-lang {
            display: inline-block;
            max-width: calc(~"100% - 10px");
            .txt-ellipsis();
            vertical-align: top;
        }
        
        
        .in {
            position: absolute;
            z-index: 10;
            left: 0;
            display: inline-block;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            padding: 5px;
            white-space: nowrap;
            overflow: hidden;
        }
        
        .arrow-down {
            transform-origin: 50% 2px;
            transition: all 0.2s ease 0s;
        }
        
        &:hover {
            color: @hoverColor2;
            .arrow-down { border-top-color: @hoverColor2;}
            .arrow-up { border-bottom-color: @hoverColor2;}
        }
        
        &.active {
            border-radius: @border-radius @border-radius 0 0;

            &:after {
                content: "";
                position: absolute;
                left: -1px;
                bottom: -7px;
                z-index: 10;
                width: 100%;
                height: 10px;
                border-left: 1px solid @borderColor;
                border-right: 1px solid @borderColor;
                background: #fff;
            }

            
            .arrow-down {
                transform: rotate(180deg);
            }
        }
    }
    
    .exchange {
        width: 30px;
        font-size: 18px;
        font-weight: bold;
        line-height: 30px;
        color: #666;
        cursor: pointer;
        transition: all 0.5s ease 0s;
        &:hover {
            color: #000;
        }
        &.disabled {
            color: #bbb;
            cursor: not-allowed;
        }
        
        &.alternate {
            transform: rotateY(180deg);
        }
    }
    


    // -- 语言选择区
    @hoverColor: #c0dff1;
    .origin-langs,
    .target-langs {
        position: absolute;
        top: calc(~"100% + 5px");
        display: none;
        padding: 10px;
        border-radius: 0 @border-radius @border-radius @border-radius;
        border: 1px solid #dcdcdc;
        background: #fff;
        box-shadow: 0 5px 10px #ccc;

        // 是否显示语言列表
        &.iol-show {
            .language-list {
                height: auto;
                border-top: 1px solid #eee;
                .scrollbar();
            }
        }

    }
    .origin-langs { left: 0; }
    .target-langs { left: calc(~"50% + "@gutter); }

    // 按钮展开
    .iol-btn-expand {
        float: right;
        margin-top: 4px;
        padding: 1px 6px;
        border-radius: 2px;
        border: 1px solid #eee;
        cursor: pointer;
        &:hover {
            border-color: #666;
        }
    }

    // 常用语言
    .langs-often {
        margin: 0 54px 0 14px;
        padding-bottom: 10px;
        font-size: 12px;
        white-space: normal;
        // &:before {
        //     content: "-常用语种";
        //     float: right;
        //     color: #aaa;
        //    
        // }
        
        li {
            display: inline-block;
            margin-right: 5px;
        }
        
        a {
            display: block;
            padding: 7px 12px;
            border-radius: 2px;
            
            &:hover,
            &.active {
                background: @hoverColor;
            }
            
            &.disabled {
                color: #ddd;
                cursor: default;
                
                &:hover {
                    background: transparent;
                }
            }
        }
    }
    
    // 语言列表
    .language-list {
        height: 0px;
        max-height: 300px;
        overflow-x: visible;
        overflow-y: auto;
        white-space: nowrap;
        overflow: hidden;
        
        >ul {
            display: inline-block;
            vertical-align: top;
        }
        li {
            padding: 6px 9px;
            
            &.language-class {
                padding: 7px 23px;
                color: #999;
                font-size: 12px;
            }
        }
        
        .lang {
            display: block;
            padding: 2px 14px;
            border-radius: 1px;
            
            &.active,
            &:hover {
                background: @hoverColor;
            }
            
            &.disabled {
                color: #ddd;
                cursor: default;
                 
                &:hover {
                    background: transparent;
                }
            }
        }
    }
}
